<template>
  <div class="container">
    <div class="row" style="padding: 20px">
      <div class="col" style="width: 900px">
        <Input v-model="input" placeholder="搜索题材、映射" icon="ios-search" @on-click="doSearch" size="large"
               @on-keyup="doSearch"
        />
        <Button type="ghost" style="margin-top: 20px;width: 100px" @click="modalAddMapping= true">添加映射</Button>
        <Table height="700" width="" :columns="tableHeader" :data="mappingData" border highlight-row
               @on-current-change="onSelected" style="margin-top: 20px;"></Table>
      </div>
      <div class="col" style="width: 900px;margin-left: 50px">
        <span style="height: 35px;font-size: 25px;margin-bottom: 70px"> {{currentMapping.blockName}}</span>

        <div class="scroll-y" style="height: 100%;width: 100%">
          <Timeline>
            <TimelineItem v-for="item in newsData"
            :key="noKey"
            >
              <div style="text-align: left">
                <p style="font-weight: bold;font-size: 12px">{{item.crawlingTime}}</p>
                <p style="font-size: 14px;font-weight: bold">{{item.title}}</p>
                <p style="font-size: 14px;color:#6e819b">{{item.summary}}</p>
                <div class="row">
                  <a @click="setNews(item)" style="font-size: 14px;text-decoration:underline;margin-top: 10px"> 修正</a>
                  <a @click="delNews(item)" style="font-size: 14px;text-decoration:underline;margin-top: 10px;margin-left: 50px"> 删除</a>
                </div>
              </div>

            </TimelineItem>

          </Timeline>
        </div>

      </div>
    </div>
    <Modal
      width="400"
      title="添加映射"
      @on-ok="commitAddMapping()"
      v-model="modalAddMapping">
      <div class="col">
        <span style="margin-bottom: 10px">题材：</span>
        <Input v-model="addSubjectName"/>
        <span style="margin-top: 20px;margin-bottom: 10px">映射：</span>
        <Input v-model="addBlockName"/>

      </div>
    </Modal>
    <Modal
      width="400"
      title="修改映射"
      @on-ok="commitSetMapping()"
      v-model="modalSetMapping">
      <div class="col">
        <span style="margin-bottom: 10px">当前题材：{{currentMapping.topicName}}</span>
        <Select clearable filterable style="width:200px" @on-change="onSelectTopicName" ref="setMappingSelect">
          <Option v-for="item in topicNameList" :value="item" :key="item">{{ item }}</Option>
        </Select>
        <span style="margin-top: 20px;margin-bottom: 10px">当前映射：{{currentMapping.blockName}}</span>

      </div>
    </Modal>

    <Modal
      width="400"
      title="修改新闻"
      @on-ok="commitSetNews"
      v-model="modalSetNews">
      <div class="col">
        <span style="margin-bottom: 10px">修改前：</span>
        <Input v-model="currentNews.blockClassify" disabled/>
        <span style="margin-top: 20px;margin-bottom: 10px">修改后：</span>
        <Select  clearable filterable style="width:200px" @on-change="onSelectBlockName"  ref="setNewSelect">
          <Option v-for="item in blockNameData" :value="item" :key="item">{{ item }}</Option>
        </Select>
      </div>
    </Modal>

  </div>
</template>

<script>

  import axios from "../assets/http/http";

  export default {
    name: 'NewsList',
    data() {
      return {
        input: '',
        modalAddMapping: false,
        modalSetMapping: false,
        modalSetNews: false,
        addSubjectName: '',
        addBlockName: '',
        mappingDataAll: [],
        mappingData: [],
        newsData: [],
        blockNameData: [],
        topicNameList:[],
        currentMapping: '',
        currentNews: '',
        tableHeader: [
          {
            title: '题材',
            key: 'topicName',
            minWidth: 125,
            align: 'center',

          }, {
            title: '名称映射',
            key: 'blockName',
            minWidth: 125,
            align: 'center',

          },
          {
            title: '操作',
            key: 'action',
            minWidth: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '20px'
                  },
                  on: {
                    click: () => {
                      this.saveMapping(params.row)
                    }
                  }
                }, '修改'),

                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },

                  on: {
                    click: () => {
                      this.removeMapping(params)
                    }
                  }
                }, '删除'),
              ]);
            }
          }],

      }
    },

    methods: {
      onSelectTopicName(value){
        this.currentMapping.newTopicName = value;
      },
      delNews(item){
        axios.get('man/news/confirm?contentId=' + item.contentId + "&blockClassify=" + item.blockClassify + "&newBlockClassify=未分类"
        ).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("删除成功");
            this.modalSetNews = false;
            this.getNewsList();
          } else {
            this.$Message.error(rsp.data.msg);
          }
        }).catch(error => {
          console.log(error);
        })
      },
      onSelectBlockName(value){
        this.currentNews.newBlockClassify = value;
      },
      setNews(item) {
        this.$refs.setNewSelect.clearSingleSelect();
        this.currentNews = item;
        this.modalSetNews = true;
      },
      commitSetNews() {
        axios.get('man/news/confirm?contentId=' + this.currentNews.contentId + "&blockClassify=" + this.currentNews.blockClassify + "&newBlockClassify=" + this.currentNews.newBlockClassify
        ).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("修改成功");
            this.modalSetNews = false;
            this.getNewsList();
          } else {
            this.$Message.error(rsp.data.msg);
          }
        }).catch(error => {
          console.log(error);
        })
      },

      commitAddMapping() {
        axios.post('man/subject/mapping/addBlockMapping', {
          "topicName": this.addSubjectName,
          "blockName": this.addBlockName
        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("添加成功");
            this.modalAddMapping = false;
            this.initMappingTable();
          } else {
            this.$Message.error(rsp.data.msg);
          }
        }).catch(error => {
          console.log(error);
        })
      },


      commitSetMapping() {
        axios.post('man/subject/mapping/setBlockMapping', {
          "topicName": this.currentMapping.newTopicName,
          "blockName": this.currentMapping.blockName,
          "subjectId": this.currentMapping.subjectId

        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("修改成功");
            this.modalSetMapping = false;
            this.initMappingTable();
          }
        }).catch(error => {
          console.log(error);
        })
      },
      saveMapping(info) {
        this.$refs.setMappingSelect.clearSingleSelect();
        this.currentMapping = info;
        this.modalSetMapping = true;
      },
      removeMapping(params) {
        axios.post('man/subject/mapping/delBlockMapping', {
          "subjectId": params.row.subjectId
        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("删除成功");
            this.initMappingTable();
          }
        }).catch(error => {
          console.log(error);
        })
      },
      doSearch() {
        if (this.input === null || this.input.trim() === "") {
          this.mappingData = this.mappingDataAll;
        } else {
          this.mappingData = [];
          var result = this.input.trim().toLocaleLowerCase();
          for (var i = 0; i < this.mappingDataAll.length; i++) {
            if (this.mappingDataAll[i].blockName.indexOf(result)>=0 || this.mappingDataAll[i].topicName.indexOf(result)>=0) {
              this.mappingData.push(this.mappingDataAll[i]);
            }
          }
        }
      },

      onSelected(currentRow, oldCurrentRow) {
        this.currentMapping = currentRow;
        this.getNewsList();
      },
      getNewsList() {

        axios.get('news/blockEvents?blockClassify=' + this.currentMapping.blockName).then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              this.newsData = rsp.data.retData;
            } else {
              this.newsData = [];
            }

          }
        }).catch(error => {
          console.log(error);
        })


      },

      initBlockNameData() {
        axios.get('news/listAllTopicName').then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              this.blockNameData = rsp.data.retData;
            }

          }
        }).catch(error => {
          console.log(error);
        })
      },
      initTopicNameList() {
        axios.get('subject/listAllSubjectName').then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              this.topicNameList = [];
              this.topicNameList = rsp.data.retData;
            }
          }
        }).catch(error=>{
          console.log(error);
        })
      },
      initMappingTable() {
        axios.get('subject/mapping/listAllMapping').then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              this.mappingData = this.mappingDataAll = [];
              this.mappingData = this.mappingDataAll = rsp.data.retData;

            }

          }
        }).catch(error => {
          console.log(error);
        })
      },
    },
    created() {
      this.initMappingTable();
      this.initBlockNameData();
      this.initTopicNameList();
    }
  }
</script>

<style scoped>

  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    box-sizing: border-box;
  }

  @media screen and (min-width: 1281px) and (max-width: 2000px) {

  }


</style>
